<template>
  <div style="display: inline-block">
    <el-form-item label="工序">
      <el-select
        v-model="searchParam.processCode"
        placeholder="请选择工序"
        clearable
        filterable
        @change="processChange"
      >
        <el-option
          v-for="item in processCodeList"
          :key="item.processCode"
          :label="item.processName"
          :value="item.processCode"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="生产线">
      <el-select
        v-model="searchParam.processEquipId"
        placeholder="请选择生产线"
        clearable
        filterable
        :filter-method="customFilter"
        @change="processEquipChange"
      >
        <el-option
          v-for="item in filteredOptions"
          :key="item.id"
          :label="item.equipCode"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item v-if="props.equipType === 'select'" label="设备">
      <el-select
        v-model="searchParam.equipId"
        placeholder="请选择设备"
        clearable
        filterable
        @change="equipChange"
        class="select-device"
      >
        <el-option
          v-for="item in equipList"
          :key="item.id"
          :label="item.equipName"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item v-if="props.equipType === 'input'" label="设备名称">
      <el-input
        v-model="searchParam.equipName"
        placeholder="请输入设备名称"
        clearable
        @change="equipInputChange"
        @keyup.enter="search"
      />
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import _ from "lodash-es";
defineOptions({
  name: "SearchFormEsm",
  inheritAttrs: false,
});
const props = defineProps({
  data: {
    // v-model 绑定
    type: Object,
    default: () => {},
  },
  equipType: {
    // v-model 绑定
    type: String,
    default: "select",
  },
});

const emit = defineEmits(["update:data", "changeSearch", "startSearch"]);

function search() {
  emit("startSearch", searchParam.value);
}

// 创建响应式副本
const searchParam = ref({
  processCode: "", // 工序编号
  processId: "", // 工序id
  equipCode: "", // 设备编号
  equipId: "", // 设备id
  equipName: "", // 设备名称
  processEquipId: "", // 生产设备id
});

// 监听父组件传入的 data 变化
watch(
  () => props.data,
  (newVal) => {
    searchParam.value.processId = newVal.processId;
    searchParam.value.processCode = newVal.processCode;
    searchParam.value.equipCode = newVal.equipCode;
    searchParam.value.equipName = newVal.equipName;
    searchParam.value.equipId = newVal.equipId;
    searchParam.value.processEquipId = newVal.processEquipId;
    if (
      searchParam.value.processId == "" &&
      searchParam.value.equipId == "" &&
      searchParam.value.processEquipId == ""
    ) {
      // -----------------------
      getEquipList();
      getProcessCodeList();
      getProcessEquipList();
    }
  },
  { deep: true }
);

// 统一处理变化事件
const handleChange = (field, value) => {
  // 触发 v-model 更新
  emit("update:data", { ...searchParam.value });
};

// 获取工序列表
const processCodeList: any = ref([]);
async function getProcessCodeList() {
  const { data } = await request({
    url: `/mdm/mdmprocess/getList`,
    method: "post",
    data: {},
  });
  processCodeList.value = data;
}
function processChange(code: string) {
  if (code) {
    const current: any =
      processCodeList.value?.filter((e: any) => e.processCode === code)[0] ??
      {};
    searchParam.value.processId = current.id || "";
    getEquipList();
    getProcessEquipList();
  } else {
    equipList.value = [];
    searchParam.value.processId = "";
    getEquipList();
    getProcessEquipList();
  }
  emit("changeSearch", searchParam.value);
}

// 通过工序查询设备列表
const equipList = ref(<any>[]);
async function getEquipList(id?: string) {
  searchParam.value.equipId = "";
  searchParam.value.equipCode = "";
  searchParam.value.equipName = "";
  const res: any = await request({
    url: "/iotadmin/scaequipinfo/getlist",
    // url: "/dmpDosPcm/equipmentInfo/getList",
    method: "post",
    data: {
      processCode: searchParam.value.processCode,
      processId: searchParam.value.processId,
      processEquipId: searchParam.value.processEquipId,
    },
  });
  if (res.code === 200) {
    equipList.value = res.data;
  }
}

function equipInputChange() {
  emit("changeSearch", searchParam.value);
}

function equipChange(id: string) {
  if (id) {
    const current: any =
      equipList.value?.filter((e: any) => e.id === id)[0] ?? {};
    searchParam.value.equipCode = current.equipCode || "";
    searchParam.value.equipName = current.equipName || "";
  } else {
    searchParam.value.equipId = "";
    searchParam.value.equipCode = "";
    searchParam.value.equipName = "";
  }
  emit("changeSearch", searchParam.value);
}

// 生产设备列表查询
const processEquipList = ref(<any>[]);
const filteredOptions = ref<any>([]);
async function getProcessEquipList() {
  searchParam.value.processEquipId = "";
  processEquipList.value = [];
  const res: any = await request({
    url: "/mdm/mdmprocessequip/getList",
    method: "post",
    data: {
      processCode: searchParam.value.processCode,
      processId: searchParam.value.processId,
    },
  });
  if (res.code === 200) {
    processEquipList.value = res.data || [];
    filteredOptions.value = [...processEquipList.value];
  }
}
function processEquipChange(id: string) {
  getEquipList();
  emit("changeSearch", searchParam.value);
}

// 使用 debounce 包装过滤方法
const customFilter = _.debounce((query: any) => {
  if (!query) {
    filteredOptions.value = [...processEquipList.value];
    return;
  }
  filteredOptions.value = processEquipList.value.filter((option: any) =>
    option.equipCode.toLowerCase().includes(query.toLowerCase())
  );
}, 300); // 延迟 300ms

onMounted(() => {
  getEquipList();
  getProcessCodeList();
  getProcessEquipList();
});
</script>
